<template>
  <div style="width: 100%;height: 100%;padding: 20px">
    <el-form ref="form" :model="marryInfo" :rules="rules" size="small" label-width="150px">
      <div class="marry_info">
        <p style="color: #02a3c7;margin: 0">新郎新娘信息</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <el-form-item label="恋人：" prop="loversId">
          <el-select style="width: 40%" v-model="marryInfo.loversId" filterable placeholder="请选择恋人"
                     @change="handleChangeLovers">
            <el-option
              v-for="item in marryLoversList"
              :key="item.id"
              :label="item | filterMarryLovers"
              :value="item.id">
              <span>{{ item.bridegroomName }}</span>
              <svg-icon icon-class="lovers"/>
              <span>{{ item.brideName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="marryInfo.loversId">
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="新郎名字：" prop="bridegroomName">
                <el-input v-model="marryInfo.bridegroomName" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新娘名字：" prop="brideName">
                <el-input v-model="marryInfo.brideName" readonly/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="新郎手机号：" prop="bridegroomTel">
                <el-input v-model="marryInfo.bridegroomTel" readonly>
                  <span slot="append"><i class="el-icon-mobile-phone"></i></span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="新娘手机号：" prop="brideTel">
                <el-input v-model="marryInfo.brideTel" readonly>
                  <span slot="append"><i class="el-icon-mobile-phone"></i></span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="marry_info">
        <p style="color: #02a3c7;margin: 0">时间地点信息</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="阳历日期：" prop="solarCalendar">
                <el-date-picker style="width: 100%" v-model="marryInfo.solarCalendar" type="date" placeholder="阳历日期"
                                format="yyyy 年 MM 月 dd 日" value-format="yyyy 年 MM 月 dd 日">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="农历日期：" prop="lunarCalendar">
                <el-input v-model="marryInfo.lunarCalendar" placeholder="农历日期(*如：二〇二〇年五月二十日)"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="地址：" prop="addr">
                <el-input v-model="marryInfo.addr" placeholder="地址">
                  <el-button slot="append" icon="el-icon-search" @click="handleSelectAddr"></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="经度：" prop="longitude">
                <el-input v-model="marryInfo.longitude" readonly placeholder="经度"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度：" prop="latitude">
                <el-input v-model="marryInfo.latitude" readonly placeholder="纬度"/>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="app_info">
        <p style="color: #02a3c7;margin: 0">小程序信息</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="小程序appid：" prop="appid">
                <el-input v-model="marryInfo.appid" placeholder="小程序appid"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="小程序appsecret：" prop="appsecret">
                <el-input v-model="marryInfo.appsecret" placeholder="小程序appsecret"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="app_music_info">
        <p style="color: #02a3c7;margin: 0">小程序背景音乐</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="背景音乐名称：" prop="musicName">
                <el-input v-model="marryInfo.musicName" placeholder="背景音乐名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="背景音乐链接：" prop="musicUrl">
                <single-upload v-model="marryInfo.musicUrl" :prefixDir="'music'" :fileSize="10"
                               :fileType="['.mp3','.wav']"></single-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="other_info">
        <p style="color: #02a3c7;margin: 0">小程序功能开关</p>
        <div style="height: 1px;background: #c0c0c0;margin: 3px 0 20px 0;"></div>
        <div>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="评论开关：" prop="commentStatus">
                <el-switch v-model="marryInfo.commentStatus" active-color="#13ce66"
                           :active-value="1" :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="礼物开关：" prop="goldStatus">
                <el-switch v-model="marryInfo.goldStatus" active-color="#13ce66"
                           :active-value="1" :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="弹幕开关：" prop="barrageStatus">
                <el-switch v-model="marryInfo.barrageStatus" active-color="#13ce66"
                           :active-value="1" :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="12">
              <el-form-item label="音乐开关：" prop="musicStatus">
                <el-switch v-model="marryInfo.musicStatus" active-color="#13ce66"
                           :active-value="1" :inactive-value="0">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer_info">
        <el-form-item style="text-align: center">
          <el-button style="width: 200px;font-size: 16px;font-weight: bold;letter-spacing: 5px;" size="medium"
                     type="primary" :loading="btnLoading" v-hasPermi="['marry:marryImage:add','marry:marryImage:edit']"
                     @click="submitForm()">提 交
          </el-button>
        </el-form-item>
      </div>
    </el-form>

    <!--    地图选址弹出框-->
    <el-dialog class="dialog_map" title="地图选址" :visible.sync="mapVisible" width="660px">
      <vuemap v-if="mapVisible" ref="child" :position="position" @selectAddrBack="selectAddrBack"></vuemap>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="OkSelectBack">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {addMarryInfo, listMarryInfoAll, updateMarryInfo} from "@/api/marry/marryInfo";
import {listMarryLovers} from "@/api/marry/marryLovers";
import Vuemap from "@/components/AMap/vuemap"

export default {
  name: "MarryInfo",
  components: {Vuemap},
  data() {
    return {
      //婚礼邀请信息
      marryInfo: {},
      //恋人对象列表
      marryLoversList: [],
      //提交加载状态
      btnLoading: false,
      //地址选择框状态
      mapVisible: false,
      //经纬度集合
      position: undefined,
      // 表单校验
      rules: {
        loversId: [{
          required: true,
          message: '恋人对象不能为空',
          trigger: 'change'
        }],
        bridegroomName:
          [{
            required: true,
            message: '新郎名字不能为空',
            trigger: 'change'
          }],
        brideName:
          [{
            required: true,
            message: '新娘名字不能为空',
            trigger: 'change'
          }],
        bridegroomTel:
          [{
            required: true,
            message: '新郎电话不能为空',
            trigger: 'change'
          }],
        brideTel:
          [{
            required: true,
            message: '新娘电话不能为空',
            trigger: 'change'
          }],
        appid: [{
          required: true,
          message: '小程序appid不能为空',
          trigger: 'blur'
        }],
        appsecret: [{
          required: true,
          message: '小程序appsecret不能为空',
          trigger: 'blur'
        }],
        solarCalendar: [{
          required: true,
          message: '阳历日期不能为空',
          trigger: 'change'
        }],
        lunarCalendar: [{
          required: true,
          message: '农历日期不能为空',
          trigger: 'blur'
        }],
        addr: [{
          required: true,
          message: '地址不能为空',
          trigger: 'change'
        }],
        longitude: [{
          required: true,
          message: '经度不能为空',
          trigger: 'change'
        }],
        latitude: [{
          required: true,
          message: '纬度不能为空',
          trigger: 'change'
        }],
        musicName: [{
          required: true,
          message: '背景音乐名称不能为空',
          trigger: 'blur'
        }],
        musicUrl: [{
          required: true,
          message: '背景音乐链接不能为空',
          trigger: 'change'
        }]
      }
    }
  },
  created() {
    this.getMarryLoversList();
    this.getMarryInfo();
  },
  methods: {
    /** 查询婚礼邀请信息 */
    getMarryInfo() {
      listMarryInfoAll().then(response => {
        let dataList = response.rows;
        if (dataList.length > 0) {
          this.marryInfo = dataList[0];
        } else {
          this.resetMarryInfo();
        }
      })
    },
    /** 查询恋人对象列表 */
    getMarryLoversList() {
      listMarryLovers().then(response => {
        this.marryLoversList = response.rows;
      })
    },
    //选择恋人对象改变时
    handleChangeLovers() {
      let lovers = this.getMarryLoversById(this.marryInfo.loversId);
      if (lovers) {
        this.marryInfo.bridegroomName = lovers.bridegroomName;
        this.marryInfo.brideName = lovers.brideName;
        this.marryInfo.bridegroomTel = lovers.bridegroomTel;
        this.marryInfo.brideTel = lovers.brideTel;
      }
    },
    //根据恋人ID获取对象信息
    getMarryLoversById(loversId) {
      let ml = {};
      for (let i = 0; i < this.marryLoversList.length; i++) {
        if (this.marryLoversList[i].id = loversId) {
          ml = this.marryLoversList[i];
          return ml;
        }
      }
      return ml;
    },
    //选取地址
    handleSelectAddr() {
      if (this.marryInfo.longitude && this.marryInfo.latitude) {
        this.position = {
          lng: Number(this.marryInfo.longitude),
          lat: Number(this.marryInfo.latitude),
          addr: this.marryInfo.addr
        };
      }
      this.mapVisible = true;
    },
    //调用子组件方法
    OkSelectBack() {
      this.$refs.child.changeSelectBack();
    },
    //选择地址返回
    selectAddrBack(info) {
      if (info) {
        this.marryInfo.addr = info.addr;
        this.marryInfo.longitude = info.lng;
        this.marryInfo.latitude = info.lat;
        this.mapVisible = false;
      }
    },
    //重置婚礼邀请对象
    resetMarryInfo() {
      this.marryInfo = {
        id: null,
        appid: null,
        appsecret: null,
        loversId: null,
        solarCalendar: null,
        lunarCalendar: null,
        longitude: null,
        latitude: null,
        addr: null,
        musicName: null,
        musicUrl: null,
        commentStatus: 1,
        blessStatus: 1,
        goldStatus: 1,
        barrageStatus: 1,
        musicStatus: 1,
        createTime: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.btnLoading = true;
          if (this.marryInfo.id != null) {
            updateMarryInfo(this.marryInfo).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.btnLoading = false;
              this.getMarryInfo();
            });
          } else {
            addMarryInfo(this.marryInfo).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.btnLoading = false;
              this.getMarryInfo();
            });
          }
        }
      });
    },
  },
  filters: {
    //格式化恋人显示
    filterMarryLovers(item) {
      return item.bridegroomName + ' & ' + item.brideName;
    }
  }
}
</script>
<style scoped>
.dialog_map >>> .el-dialog__body {
  padding: 10px;
}
</style>
